<template>
    <view class="page">
        <view class="page-fixed-top">
            <view class="fixed-item" :class="{'active':TabId==0}" @click="onClickNavitem(0)">
                <view class="title">资讯</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==1}" @click="onClickNavitem(1)">
                <view class="title">需求</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==2}" @click="onClickNavitem(2)">
                <view class="title">活动</view>
                <view class="line"></view>
            </view>
        </view>
        <view class="page-myNews" v-if="TabId==0">
            <view class="news-item-a" v-for="(item,index) in newsList" :key="index" @click="skipNewsDetail(item.id)">
                <view class="news-item-left">
                    <view class="item-content-text">
                        {{item.title}}
                    </view>
                    <view class="item-content-tip">
                        <view v-for="(ite,ind) in item.lable_array" :key="ind">{{ite}}</view>
                    </view>
                    <view class="item-content-time">
                        {{item.created_at.split(' ')[0]}}
                    </view>
                </view>
                <view class="news-item-right">
                    <img :src="item.img_url" />
                </view>
            </view>
        </view>
        <view class="page-myNeeds" v-if="TabId==1">
            <view class="needs-item" v-for="(item,index) in needsList" :key="index" @click="skipNeedsDetail(item.id)">
                <view class="needs-item-top">
                    <text class="item-title">{{item.title}}</text>
                    <text :class="{'item-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>
                </view>
                <view class="needs-item-center">
                    <view class="item-content-text">{{item.content}}</view>
                    <view class="item-content-tip" v-if="item.label_arr.length>0">
                        <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                    </view>
                    <view class="item-content-img" v-if="item.img_array_url.length>0">
                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill" />
                    </view>
                </view>
                <view class="needs-item-bottom">
                    <view class="item-btn-item">
                        <img :src="File_Url+'eyes-icon.png'" />
                        <text>{{item.browse_num}}</text>
                    </view>
                    <view class="item-btn-item">
                        <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                        <img :src="File_Url+'collect.png'" v-else/>
                        <text>{{item.attention_num}}</text>
                    </view>
                    <view class="item-time">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
        </view>
        <view class="page-myActivity" v-if="TabId==2">
            <view class="page-item" v-for="(item,index) in activityList" :key="index" @click="skipActivityDetail(item.activity_id)">
                <view class="page-item-top">
                    <view class="item-top-left">
                        <img :src="item.activity_info.img_url" mode="aspectFill" />
                    </view>
                    <view class="item-top-right">
                        <view class="desc">
                            {{item.activity_info.name}}
                        </view>
                        <view class="tip">
                            <view class="tip-time" v-if="item.activity_info">{{item.activity_info.created_at.split(' ')[0]}}</view>
                            <view class="tip-status" :class="{'red':item.activity_info.activity_status_name=='报名中','yellow':item.activity_info.activity_status_name=='进行中','green':item.activity_info.activity_status_name=='已结束'}">{{item.activity_info.activity_status_name}}</view>
                        </view>
                    </view>
                </view>
                <view class="page-item-bottom">
                    <view class="title">活动费用：</view>
                    <view class="money red">{{item.activity_info.cost==0.00?'免费':'￥'+item.activity_info.cost}}</view>
                </view>
            </view>
        </view>
        <view class="null">
            <text>没有更多了哦～</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "myFollow",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                TabId:0,
                needsList: [],
                needsPage: 1,
                newsList: [],
                newsPage: 1,
                activityList: [],
                activityPage: 1,
            }
        },
        onLoad(query){
            console.log(query)
            this.TabId = query.followId;
            switch (query.followId) {
                case "0":
                    this.getMyFavoriteNews();
                    break;
                case "1":
                    this.getMyFavoriteDemand();
                    break;
                case "2":
                    this.getUserAttentionActivityList();
                    break;
            }
        },
        methods:{
            //获取我收藏的资讯
            async getMyFavoriteNews(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.newsPage,
                    limit: 10
                }
                const res = await this.$api.getMyFavoriteNews(params);
                if (res.data.level == 'success') {
                    this.newsList = res.data.data
                }
            },
            //获取我关注的需求
            async getMyFavoriteDemand(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.needsPage,
                    limit: 10
                }
                const res = await this.$api.getMyFavoriteDemand(params);
                if (res.data.level == 'success') {
                    this.needsList = res.data.data
                }
            },
            //获取我关注的活动列表
            async getUserAttentionActivityList(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.activityPage,
                    limit: 10
                }
                const res = await this.$api.getUserAttentionActivityList(params);
                if (res.data.level == 'success'){
                    this.activityList = res.data.data
                }
            },
            onClickNavitem(id){
                switch (id) {
                    case 0:
                        this.getMyFavoriteNews();
                        break;
                    case 1:
                        this.getMyFavoriteDemand();
                        break;
                    case 2:
                        this.getUserAttentionActivityList();
                        break;
                }
                this.TabId = id;
            },
            //跳转资讯详情
            skipNewsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/newsDetail/newsDetail?newsId='+id
                })
            },
            //跳转需求详情
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //跳转活动详情
            skipActivityDetail(id){
                uni.navigateTo({
                    url:'/pages/details/activityDetail/activityDetail?activityId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: calc(100vh - 128rpx);
        padding: 108rpx 20rpx 20rpx 20rpx;
    }
    .list-bottom{
        padding: 23rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
    }
    .page-fixed-top{
        position: fixed;
        top: 0;
        left: 0;
        @include flex(flex-start);
        flex-direction: row;
        background: #FFFFFF;
        width: 100vw;
        .fixed-item{
            width: 33%;
            height: 88rpx;
            @include flex();
            flex-direction: column;
            .title{
                height: 48rpx;
                line-height: 48rpx;
                font-size: 34rpx;
            }
        }
        .fixed-item.active{
            .title{
                height: 80rpx;
                line-height: 80rpx;
                color: #3782FF;
                font-weight: bold;
                font-size: 40rpx;
            }
            .line{
                width: 40rpx;
                height: 8rpx;
                background: #3782FF;
                border-radius: 4rpx;
            }
        }
    }
    .page-myNews{
        .news-item-a{
            padding: 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 2rpx solid #E5E5E5;
            background: #ffffff;
            .news-item-left{
                width: calc(100% - 282rpx);
                height: 180rpx;
                .item-content-text{
                    @include ellipsis(2);
                    height: 84rpx;
                    line-height: 42rpx;
                    font-size: 30rpx;
                    margin-bottom: 16rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    padding-bottom: 16rpx;
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-time{
                    height: 28rpx;
                    line-height: 28rpx;
                    font-size: 24rpx;
                    color: #9B9B9B;
                }
            }
            .news-item-right{
                margin-left: auto;
                width: 260rpx;
                height: 180rpx;
                border-radius: 10rpx;
                overflow: hidden;
            }
        }
    }
    .page-myNeeds{
        .needs-item{
            padding: 20rpx 30rpx;
            background: #FFFFFF;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
            .needs-item-top{
                height: 57rpx;
                @include flex(flex-start);
                flex-direction: row;
                .item-title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .item-status{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .needs-item-center{
                padding: 10rpx 0rpx 16rpx 0;
                .item-content-text{
                    @include ellipsis(3);
                    font-size: 26rpx;
                    line-height: 37rpx;
                    margin-bottom: 16rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .needs-item-bottom{
                @include flex(flex-start);
                flex-direction: row;
                .item-btn-item{
                    @include flex();
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }
                }
                .item-time{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
    }
    .page-myActivity{
        .page-item{
            padding: 0 30rpx;
            margin-bottom: 20rpx;
            background: #FFFFFF;
            .page-item-top{
                padding: 30rpx 0;
                border-bottom: 1rpx solid #E5E5E5;
                @include flex(flex-start);
                flex-direction: row;
                .item-top-left{
                    width: 220rpx;
                    height: 152rpx;
                    overflow: hidden;
                    border-radius: 10rpx;
                }
                .item-top-right{
                    margin-left: auto;
                    height: 152rpx;
                    width: calc(100% - 240rpx);
                    @include flex(flex-start,flex-start);
                    flex-direction: column;
                    .desc{
                        height: 84rpx;
                        line-height: 42rpx;
                        font-size: 30rpx;
                        @include ellipsis(2);
                    }
                    .tip{
                        margin-top: auto;
                        height: 42rpx;
                        width: 100%;
                        @include flex(flex-start);
                        flex-direction: row;
                        .tip-time{
                            height: 42rpx;
                            line-height: 42rpx;
                            color: #9B9B9B;
                            font-size: 28rpx;
                        }
                        .tip-status{
                            margin-left: auto;
                            height: 42rpx;
                            line-height: 42rpx;
                            font-size: 30rpx;
                        }
                    }
                }
            }
            .page-item-bottom{
                padding: 24rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                view{
                    height: 56rpx ;
                    line-height: 56rpx;
                }
                .title{
                    font-size: 30rpx;
                    font-weight: ceil(600);
                }
                .money{
                    font-size: 40rpx;
                    font-weight: ceil(600);
                }
                .type{
                    font-size: 30rpx;
                }
                .free{
                    font-size: 28rpx;
                    font-weight: ceil(600);
                }
            }
        }
        .red{
            color: #FF6565;
        }
        .yellow{
            color: #FFA800;
        }
        .green{
            color: #00C735;
        }
    }
</style>